<template>
  <div app-container>
    <el-row type="flex" justify="center">
      <el-col :span="22">
        <div align="center" style="background-color:#eaedef; height: 60px;">
          <div>
            <span id="mainTitle">借款审核</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <div>
          <el-descriptions title="审核状态" :column="2" style="font-size:large;">
            <el-descriptions-item label="贷款编号">
              {{this.auditStatus.orderNum}}
            </el-descriptions-item>
            <el-descriptions-item label="当前进度">
              <span style="color:coral;"><dict-tag :options="dict.type.loan_info_applicant_status" :value="this.auditStatus.progressStatus" /></span>
            </el-descriptions-item>
            <el-descriptions-item label="操作员">
              {{this.auditStatus.userName}}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions style="font-size:large;">
            <el-descriptions-item label="初审意见" >
              {{this.auditStatus.auditIdea}}
            </el-descriptions-item>
          </el-descriptions>
          <hr />
        </div>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <div>
          <el-descriptions title="申请产品" size="medium" :column="2" style="font-size:large;">
            <el-descriptions-item label="申请产品">
              <span>{{this.auditStatus.producationName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="贷款金额">
              <span>￥{{this.auditStatus.loanAmount}}元</span>
            </el-descriptions-item>
            <el-descriptions-item label="渠道">
              <span>{{this.auditStatus.channelName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="还款方式">
              <dict-tag :options="dict.type.loan_info_payment_method" :value="this.auditStatus.repayMode" />
            </el-descriptions-item>
            <el-descriptions-item label="期数">
              <span>{{this.auditStatus.periods}}期</span>
            </el-descriptions-item>
            <el-descriptions-item label="转换天数">
              <span>{{this.auditStatus.periods*30}}天</span>
            </el-descriptions-item>
            <el-descriptions-item label="综合利率">
              <span>{{((this.auditStatus.loanAmount/this.auditStatus.periods+this.auditStatus.loanAmount/this.auditStatus.periods*this.auditStatus.monRate)/this.auditStatus.loanAmount*1000/this.auditStatus.periods).toFixed(2)}}%</span>
            </el-descriptions-item>
            <el-descriptions-item label="借款利率">
              <span>{{this.auditStatus.monRate*100}}%</span>
            </el-descriptions-item>
            <el-descriptions-item label="罚息计算方式">
              <span>贷款总额/期数*{{(this.auditStatus.delayRate*100).toFixed(2)}}%</span>
            </el-descriptions-item>
            <el-descriptions-item label="居间服务费">
              <span>￥{{(this.auditStatus.loanAmount/this.auditStatus.periods*this.auditStatus.servCharge/10).toFixed(2)}}元</span>
            </el-descriptions-item>
          </el-descriptions>
          <hr />
        </div>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <div>
          <el-descriptions title="借款信息" size="medium" :column="2" style="font-size:large;">
            <el-descriptions-item label="贷款金额">
              <span>￥{{this.auditStatus.loanAmount}}元</span>
            </el-descriptions-item>
            <el-descriptions-item label="还款方式">
              <dict-tag :options="dict.type.loan_info_payment_method" :value="this.auditStatus.repayMode" />
            </el-descriptions-item>
            <el-descriptions-item label="分期期数">
              <span>{{this.auditStatus.periods}}期</span>
            </el-descriptions-item>
            <el-descriptions-item label="贷款用途">
              <span>{{this.auditStatus.usage}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="还款来源">
              <span>{{this.auditStatus.paybackOrigin}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="还款保障">
              <span>{{this.auditStatus.paybackGuarantee}}</span>
            </el-descriptions-item>
          </el-descriptions>
          <hr />
        </div>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <div v-for="(one, index) in allData" :key="index">
          <el-descriptions v-if="one.title !='车辆信息' && one.title !='房产信息' " :title="one.title" name="1" size="medium"
            :column="3" style="font-size:large;">
            <el-descriptions-item v-for="(oneone, index1) in one.viewDetails" :key="index1" :label="oneone.fieldName">
              <div v-if="oneone.fieldType != 'pictrue'">
                <span v-text="oneone.value"></span>
              </div>
              <div v-else-if="oneone.fieldType == 'pictrue'">
                <el-image style="width: 160px; height: 90px"
                  :src="require('@/views/production/collaborativeProduct/1561390725417.jpeg')" />
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-descriptions title="历史进件" size="medium" />
        <hr />
        <!-- <el-col :span="20">
          <span>该手机号的历史进件</span>
        </el-col> -->
      </el-col>
    </el-row>
    <el-row :gutter="24" class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-table :v-loading="this.loading" :data="historyList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40" align="center" />
          <el-table-column label="申请日期" align="center" prop="" />
          <el-table-column label="姓名" align="center" prop="" />
          <el-table-column label="手机号" align="center" prop="" />
          <el-table-column label="审核状态" align="center" prop="" />
          <el-table-column label="授信额度(元)" align="center" prop="" />
          <el-table-column label="放款订单状态" align="center" prop="" />
          <el-table-column label="还款进度" align="center" prop="" />
          <template slot="empty">
            <el-empty image-size="60"></el-empty>
          </template>
        </el-table>
      </el-col>
    </el-row>

    <el-row :gutter="24" class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-descriptions title="授信记录" size="medium" />
        <hr />
      </el-col>
    </el-row>

    <el-row :gutter="24" class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-table :v-loading="this.loading" :data="historyList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40" align="center" />
          <el-table-column label="操作人" align="center" prop="" />
          <el-table-column label="内容" align="center" prop="" />
          <el-table-column label="时间" align="center" prop="" />
          <template slot="empty">
            <el-empty image-size="60">
              <!-- <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload> -->
            </el-empty>
          </template>
        </el-table>
      </el-col>
    </el-row>

    <el-row :gutter="24" class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-descriptions title="修改记录" size="medium" />
        <hr />
      </el-col>
    </el-row>

    <el-row :gutter="24" class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-table :v-loading="this.loading" :data="historyList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40" align="center" />
          <el-table-column label="操作人" align="center" prop="" />
          <el-table-column label="修改内容" align="center" prop="" />
          <el-table-column label="修改时间" align="center" prop="" />
          <template slot="empty">
            <el-empty image-size="60"></el-empty>
          </template>
        </el-table>
      </el-col>
    </el-row>
    <div class="fixed-button">
      <el-row justify="center" type="flex">
        <el-col :span="6" :offset="18">
          <el-button type="primary" @click="secondTrial">风控审核</el-button>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="风控审核" :visible.sync="riskControlCheck" width="1000px" height="400px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="审核结果" label-width="150px">
              <el-select v-model="form.auditResult" placeholder="请选择状态">
                <el-option v-for="dict in dict.type.loan_info_applicant_status" :key="dict.value" :label="dict.label"
                  :value="dict.value" v-if="dict.value >= 6 && dict.value <= 8" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="授信额度" prop="creditLine" label-width="150px">
              <el-input v-model="formData.loanAmount" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="授信期限" prop="creditPeriod" label-width="150px">
              <el-input v-model="formData.periods" placeholder="请输入" maxlength="30" width="360px" :disabled="disabled"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="还款方式" prop="paymentMethod" label-width="150px">
              <el-input v-model="formData.repayMode" placeholder="请输入" maxlength="30" width="360px" :disabled="disabled"/>
            </el-form-item>
          </el-col>
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="借款利率" prop="lendingRate" label-width="150px">
              <el-input v-model="formData.monRate" placeholder="请输入" maxlength="30" width="360px" :disabled="disabled"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="罚息率" prop="penaltyRate" label-width="150px">
              <el-input v-model="formData.delayRate" placeholder="请输入" maxlength="30" width="360px" :disabled="disabled"/>
            </el-form-item>
          </el-col>
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="结清违约金率" prop="liquidatedDamages" label-width="150px">
              <el-input v-model="formData.remainRate" placeholder="请输入" maxlength="30" width="360px" :disabled="disabled"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="手续费支付方式" prop="payHandlingFeeWay" label-width="150px">
              <el-input v-model="formData.serveChangeMethod" placeholder="请输入" maxlength="30" width="360px" :disabled="disabled"/>
            </el-form-item>
          </el-col>
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="资金方" prop="payFundParty" label-width="150px">
              <el-input v-model="formData.assetName" placeholder="请输入" maxlength="30" width="360px" :disabled="disabled"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="22">
            <el-form-item label="贷后管理建议" prop="postLoanProposal" label-width="150px">
              <el-input v-model="form.afterManageAdvice" prop="请输入" width="750px" />
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="审批意见" prop="approvalOpinion" label-width="150px">
              <el-input v-model="form.auditIdea" prop="请输入" width="750px" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-divider content-position="right" />
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { newViewDetails } from '@/api/viewDetails'
import { findAuditStatus, updateRiskControl } from '@/api/order/secondTrial'

export default {
  name: 'secondTrialDetail',
  dicts: ['sys_normal_disable', 'loan_info_audit_result', 'loan_info_applicant_status', 'loan_info_payment_method'],
  data() {
    return {
      loading: true,
      disabled: true,
      riskControlCheck: false,
      allData: [
        {
          title: '个人信息',
          data: []
        }
      ],
      clientId: undefined,
      loanId: undefined,
      auditStatus: {},
      historyList: {},
      formData: {},
      form: {
        loanId: undefined,
        auditResult: undefined,
        afterManageAdvice: undefined,
        auditIdea: undefined
      }
    }
  },
  created() {
    console.log(this.$route)
    this.loanId = this.$route.params.loanId
    this.clientId = this.$route.params.clientId
    this.getList(this.loanId, this.clientId)
  },
  methods: {
    getList(loanId, clientId) {
      newViewDetails(clientId).then(res => {
        findAuditStatus(loanId).then(response => {
          console.log(response)
          this.auditStatus = response.data
        }).catch()
        this.allData = res.data
      }).catch()
    },
    secondTrial() {
      this.formData = this.auditStatus
      this.riskControlCheck = true
    },
    cancel() {
      this.riskControlCheck = false
      this.reset()
    },
    //重置表单
    reset() {
      this.form = {
        status: '0'
      }
      this.resetForm('form')
    },
    submitForm: function () {
      this.$refs['form'].validate(valid => {
        this.form.loanId = this.formData.loanId
        if (valid) {
          // 执行添加/修改请求
          updateRiskControl(this.form).then(res => {
            if (res.code == 200) {
              this.$modal.msgSuccess(res.msg)
            }
            this.getList(this.loanId, this.clientId)
            // console.log(res)
            // debugger
          })
          this.reset()
          this.riskControlCheck = false
          this.$router.go(-1)// 返回上一个页面
          //关闭子页面
          this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
          this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path)
        }
      })
    }
  }
}
</script>
<style>
body>.el-container {
  margin-bottom: 40px;
  display: inline-block;
}

#mainTitle {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  float: left;
  height: 60px;
  margin-top: 10px;
}

/* 调整整个名字和输入框占的盒子大小 */
#context {
  float: left;
  /* width: 20%;  */
  margin-left: 50px;
}

.long {
  width: 1050px;
  margin-left: 50px;
}

.short {
  float: left;
  /* width: 450px; */
  margin-left: 50px;
}

.title {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #303133;
  background-color: aqua;
}

.secondTitle {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bolder;
  color: #303133;
  background-color: aqua;
  height: 35px;
}

.el-divider--vertical {
  display: inline-block;
  width: 100%;
  height: 1px;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
  color: black;
}

.el-descriptions__title {
  font-size: x-large;
  font-weight: normal;
}
</style>
